<template>
    <div class="flex h-full w-full  justify-center justify-items-start items-center" style="height:100vh;">

        <div class="flex flex-col justify-center items-center" style="width: 400px">
            <h1>登录</h1>

            <t-avatar class="avatar-example mt-3" image="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
                shape="round"></t-avatar>
            <div class="text-lg">用户感知系统</div>

            <t-form ref="form" :data="formData" :rules="rules" reset-type="initial" show-error-message
                label-align="left" scroll-to-first-error="auto" @reset="onReset" @submit="onSubmit">
                <t-form-item label="用户名" name="mobile" help="输入用户名">
                    <t-input v-model="formData.mobile" borderless placeholder="请输入内容"></t-input>
                </t-form-item>
                <t-form-item label="密码" name="password">
                    <t-input v-model="formData.password" borderless type="password" :clearable="false"
                        placeholder="请输入内容">
                        <template #suffixIcon>
                            <BrowseOffIcon />
                        </template>
                    </t-input>
                </t-form-item>
                <div class="button-group">
                    <t-button theme="primary" type="submit" size="large">提交</t-button>
                    <t-button theme="default" variant="base" type="reset" size="large">重置</t-button>
                </div>
            </t-form>
        </div>

    </div>

</template>

<script setup lang="ts">
import { BrowseOffIcon } from "tdesign-icons-vue-next"
const { login } = useAuth()
const form = ref(null);
import { Message } from 'tdesign-mobile-vue';
const rules = {
    mobile: [{
        validator: (val: any) => {
            const regex = /^1[3-9]\d{9}$/;
            return regex.test(val);
        }, message: '手机号错误'
    }],
    password: [{ validator: (val: any) => val.length > 6, message: '长度大于6个字符' }],
};
const formData = ref({
    mobile: '18888888888',
    password: 'admin888',
});
onMounted(() => {
    // @ts-ignore
    form.value.setValidateMessage(rules);
});

const onSubmit = async (e) => {
    if (!e.validateResult) {
        Message.error("校验失败")
    } else {
        await login(formData.value)
        Message.success("登录成功")
    }
}
const onReset = () => {

}
</script>
<style lang="scss">
.box {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.textarea {
    height: 100px;
    width: 100%;
}

.button-group {
    background-color: var(--bg-color-demo, #fff);
    box-sizing: border-box;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    position: relative;
    border-bottom: 0.5px solid #e7e7e7;

    .t-button {
        height: 32px;
        flex: 1;

        &:not(:last-child) {
            flex: 1;
            margin-right: 16px;
        }
    }
}
</style>